<template>
    <div class="pagination">
      <slot />
      <el-pagination
        v-model:current-page="data.page"
        v-model:page-size="data.size"
        :page-sizes="[2,10, 15, 20, 30]"
        background
        layout="total, sizes, prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      />
    </div>
  </template>
  
  <script setup lang="ts">
  import { reactive } from 'vue'
  
  type Props = {
    total?: number
  }
  withDefaults(defineProps<Props>(), {
    total: 0
  })
  
  const emits = defineEmits(['pageChange'])
  
  const data = reactive({
    page: 1,
    size: 10
  })
  
  const handleSizeChange = (val: number) => {
    data.size = val
    emits('pageChange', data)
  }
  const handleCurrentChange = (val: number) => {
    data.page = val
    emits('pageChange', data)
  }
  </script>
  
  <style lang="scss" scoped>
  .pagination {
    display: flex;
    margin-top: 10px;
    .el-pagination {
      margin-left: auto;
    }
  }
  </style>
  